<!DOCTYPE html>
<html>
<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <link rel="stylesheet" href="/css/myProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script>
        $(function () {
            //获取当前登录用户的id
            var userId=user.id;

            //定义我的栏目状态,默认我的攻略
            var type=1;
            $('#strategy-tab').click(function () {
                //我的攻略
                type=1;
            })
            $('#diaries-tab').click(function () {
                //我的日报
                type=2;
            })

            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //存储攻略的数组
            var strategyArr = [];

            //点击标题栏目清空分页条件
            $('.nav-link').click(function () {
                console.log("重置分页")
                 currentPage = 1;

                 pages=0;

                strategyArr = [];
                 if (type==2){
                     //默认查询第一页
                     query2();
                 }
            })
            function query() {
                //获取我的攻略
                $.get(baseUrl + "/strategies/myFavorite", {currentPage: currentPage,userId:userId}, function (data) {
                    //把第二个数组合并第一个数组中
                    $.merge(strategyArr, data.list);
                    var json = {
                        list: strategyArr
                    };
                    //渲染数据
                    $("#strategy").renderValues(json, {
                        getHref: getHref
                    });
                    //获取总页数
                    pages = data.pages;
                })
                currentPage = currentPage + 1;
            }
            //默认查询第一页
            query();
            //查询我的日报
            function query2() {
                //获取我的日报
                $.get(baseUrl + '/newsPages/collections', {currentPage: currentPage,userId:userId}, function (data) {
                    //把第二个数组合并第一个数组中
                    $.merge(strategyArr, data.list);
                    var json = {
                        list: strategyArr
                    };
                    //渲染数据
                    $("#diaries").renderValues(json, {
                        getHref: getHref
                    });
                    //获取总页数
                    pages = data.pages;
                })
                currentPage = currentPage + 1;
            }
            //给window绑定滚动事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //如果是小于总页数就发送请求
                    if (currentPage <= pages) {
                        if (type==1){

                            query();
                        } else if (type==2) {
                            query2()
                        }
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            content: '<span class="info-text">亲,已经到底了!</span>',
                            autoClose: 2500
                        });
                    }
                }
            });
        });
    </script>
</head>
<body>
<div class="nav-search">
    <a href="javascript:window.history.go(-1)">
        <span><i class="fa fa-angle-left fa-2x"></i></span>
    </a>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="strategy-tab" data-toggle="pill" href="#strategy">
                我的攻略
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="diaries-tab" data-toggle="pill" href="#diaries">
                我的日报
            </a>
        </li>
    </ul>
    <!--我的攻略-->
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="strategy">
            <div render-loop="list">
                <dl class="list">
                    <dd>
                        <a render-key="list.id" render-fun="getHref" data-url="/strategyCatalogs.html?id=">
                            <img render-src="list.coverUrl">
                            <p><span class="title" render-html="list.title"></span>

                            </p>
                        </a>
                        <hr>
                    </dd>
                </dl>
            </div>
        </div>


        <!--我的日报-->
        <div class="diary tab-pane fade " id="diaries">
            <div render-loop="list">
            <div>
                <div class="row">
                    <div class="col-8">
                        <a data-url="/newsContent.html?id=" render-key="list.id" render-fun="getHref">
                            <b render-html="list.title"></b>
                        </a>
                        <br/>
                        <a data-url="/newsContent.html?id=" render-key="list.id" render-fun="getHref">
                            <img class="rounded" width="100%" height="110px"
                                 render-src="list.coverUrl">
                        </a>
                        <br>
                        <div class="caption">
                            <span render-html="list.releaseTime"> </span>&nbsp;&nbsp;
                            <i class="fa fa-eye handleBtn" id="likeBtn" render-html="list.browseNum">11 </i>
                            <br/>
                        </div>
                    </div>

                </div>
            </div>
            </div>
        </div>


    </div>
</div>
</body>
</html>